<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>03放大镜</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			body {
				overflow: hidden;
			}
			#firCan {
				display: block;
				border: 1px solid khaki;
				margin: 20px auto;
			}
		</style>
	</head>
	<body>
		<canvas id="firCan" width="1000" height="625">
			您的浏览器版本过低, 不支持Canvas, 请升级!
		</canvas>
	</body>
	<script type="text/javascript">
		// 1, 获取Canvas
		var firCan = document.getElementById("firCan");
		// 2, 获取 2d渲染上下文
		var context = firCan.getContext('2d');
		// 3, 加载图片
		// 创建 img对象
		var imgObj = new Image();
		// 设置 src
		imgObj.src = "img/banner3.png";
		// 图片加载完毕
		imgObj.onload = function() {
			// 图片绘制到 canvas: drawImage()
			context.drawImage(imgObj, 0, 0, 1280, 800, 0, 0, 1000, 625);
			
			// canvas 添加鼠标点击事件
			firCan.onmousedown = function() {
				firCan.onmousemove = function(event) {
					// 清除canvas
					firCan.width = 1000;
					firCan.height = 625;
					// 绘制图片
					context.drawImage(imgObj, 0, 0, 1280, 800, 0, 0, 1000, 625);
					
					// 图形组合方式
					context.globalCompositeOperation = "destination-out";
					
					// 获取事件对象
					var even = event || window.event;
					var x = even.offsetX;
					var y = even.offsetY;
					// 绘制圆
					context.beginPath();
					context.arc(x, y, 100, 0, Math.PI * 2);
					context.fill();
					
					// 图形组合方式
					context.globalCompositeOperation = "destination-over";
					
					// 计算
					var dx = 1280 * x / 1000;
					var dy = 800 * y / 625;
					// 绘制图片
					context.drawImage(imgObj, dx - 100 / 1.28, dy - 100 / 1.28, 200 / 1.28, 200 / 1.28, x - 100, y - 100, 200, 200);
				}
			}
			// 鼠标抬起
			firCan.onmouseup = function() {
				firCan.onmousemove = null;
				// 清除canvas
				firCan.width = 1000;
				firCan.height = 625;
				// 绘制图片
				context.drawImage(imgObj, 0, 0, 1280, 800, 0, 0, 1000, 625);
			}
		}
		
		
		
	</script>
</html>
